<template>
    <section class="todoapp">
        <header class="header">
            <h1>todos</h1>
            <input
                class="new-todo"
                placeholder="What needs to be done?"
                autofocus
                @keydown.enter="addTodo"
            />
        </header>
        <section class="main">
            <input
                id="toggle-all"
                class="toggle-all"
                type="checkbox"
                :checked="undownNum === 0 && todoList.length !== 0"
                @click="toggleAll"
            />
            <label for="toggle-all">Mark all as complete</label>
            <ul class="todo-list">
                <li
                    v-for="item in todoList"
                    :key="item.id"
                    :class="{
                        completed: item.is_checked,
                        editing: item.is_editing,
                    }"
                >
                    <div class="view">
                        <input
                            class="toggle"
                            type="checkbox"
                            v-model="item.is_checked"
                        />
                        <!-- <label @dblclick="openInp(item.id)">
                            {{ item.text }}
                        </label> -->
                        <label @dblclick="allInp(item.id, 0)">
                            {{ item.text }}
                        </label>
                        <button @click="delItem(item.id)" class="destroy"></button>
                    </div>
                    <!-- <input
                        class="edit"
                        :value="item.text"
                        @keydown.enter="enterInp(item.id, $event)"
                        @keydown.esc="escInp(item.id)"
                    /> -->
                    <input
                        class="edit"
                        :value="item.text"
                        @keydown.enter="allInp(item.id, 1, $event)"
                        @keydown.esc="allInp(item.id, 2)"
                    />
                </li>
            </ul>
        </section>
        <footer class="footer">
            <span class="todo-count"
                ><strong>{{ undownNum }}</strong> item left</span
            >
            <ul class="filters">
                <li>
                    <a
                        :class="{ selected: isShow === 'all' }"
                        @click="isShow = 'all'"
                        name="all"
                        href="javascript:;"
                        >All</a
                    >
                </li>
                <li>
                    <a
                        :class="isShow === 'active' ? 'selected' : ''"
                        @click="isShow = 'active'"
                        name="active"
                        href="javascript:;"
                        >Active</a
                    >
                </li>
                <li>
                    <a
                        :class="{ selected: isShow === 'completed' }"
                        @click="isShow = 'completed'"
                        name="completed"
                        href="javascript:;"
                        >Completed</a
                    >
                </li>
            </ul>
            <button
                v-show="undownNum !== todoList.length"
                class="clear-completed"
                @click="clearCompleted"
            >
                Clear completed
            </button>
        </footer>
    </section>
    <footer class="info">
        <p>Double-click to edit a todo</p>
        <!-- Remove the below line ↓ -->
        <p>Template by <a href="javascript:;">Sindre Sorhus</a></p>
        <!-- Change this out with your name and url ↓ -->
        <p>Created by <a href="javascript:;">you</a></p>
        <p>Part of <a href="javascript:;">TodoMVC</a></p>
    </footer>

    <!-- 删除确认弹框 -->
    <showmsg v-if="delFlag" @cancelBtn="cancelBtn" @okBtn="okBtn" />
</template>

<script>
import showmsg from "./components/showmsg.vue";
export default {
    data() {
        return {
            // 用于渲染页面, 和 template 连用
            todoList: [],
            // 我的全部数据, 在 JS 中 我们只操作 baseList
            baseList: [
                {
                    id: 1,
                    text: "吃饭",
                    is_checked: true,
                    is_editing: false,
                },
                {
                    id: 2,
                    text: "睡觉",
                    is_checked: false,
                    is_editing: false,
                },
                {
                    id: 3,
                    text: "打豆豆",
                    is_checked: false,
                    is_editing: false,
                },
            ],
            isShow: "all",
            delFlag: false,
            delId: -1,
        };
    },
    methods: {
        // 10. 清空已选中
        clearCompleted() {
            this.delFlag = true;
        },
        // 9. 删除某一项
        delItem(id) {
            this.delFlag = true;
            this.delId = id
        },

        // 8. 删除弹框的确定按钮
        okBtn() {
            /**
             *  当前确定按钮 点击的时候 会执行这个事件
             *      1. 清空已选中
             *          将数组中 选中项 为 true 的过滤掉, 留下 未选中
             *      2. 删除某一项
             *          将 数组中 id 不等于我们要删除的 元素 留下
             */

            // 1. 清空已选中
            // this.baseList = this.baseList.filter(t => !t.is_checked)
            // 2. 删除某一项
            // this.baseList = this.baseList.filter(t => t.id !== this.delId)

            this.baseList =
                this.delId === -1
                    ? this.baseList.filter((t) => !t.is_checked)
                    : this.baseList.filter((t) => t.id !== this.delId);

            // 确保 每一次删除完毕后, 不会因为 delId 影响下一次使用
            this.delId = -1

            this.cancelBtn();
        },
        // 7. 删除弹框的取消按钮
        cancelBtn() {
            this.delFlag = false;
        },

        // 6. enter / esc / 双击事件
        allInp(id, type, e) {
            /**
             *  当前事件是为了 优化 3  4  5 这三个函数
             *
             *  这三个函数中, 功能大体相同, 所以可以优化
             *
             *  因为需要标准当前是 enter 还是 esc 还是双击, 所以当前函数需要一个 特别的参数, 证明当前是什么事件
             *  以及之前需要用的 id 也不能少, 回车事件中 还需要额外使用一个 事件对象
             *
             *  所以 我自己和我自己做了一个约定, 我个人规定 当前函数接收 3个参数
             *      1. id: 需要修改的数据是谁
             *      2. type: 当前的事件类型
             *              0  代表 双击
             *              1  代表 enter
             *              2  代表 esc
             *      3. e: 当前的事件对象
             */

            const info = this.baseList.find((t) => t.id === id);
            type === 1 && (info.text = e.target.value);

            info.is_editing = !type;
        },

        // 5. 编辑框的 enter 事件
        enterInp(id, e) {
            const info = this.baseList.find((t) => t.id === id);
            info.text = e.target.value;
            info.is_editing = false;
        },

        // 4. 编辑框的 esc 事件
        escInp(id) {
            const info = this.baseList.find((t) => t.id === id);
            info.is_editing = false;
        },

        // 3. 双击 文本 进入编辑状态
        openInp(id) {
            const info = this.baseList.find((t) => t.id === id);
            info.is_editing = true;
        },

        // 2. 点击全选按钮
        toggleAll(e) {
            // console.log(e.target.checked)
            this.baseList.forEach((t) => (t.is_checked = e.target.checked));
        },

        // 1. 添加新的 todo
        addTodo(e) {
            // console.log("键盘按下", e.target.value);
            this.baseList.push({
                id: this.baseList[this.baseList.length - 1].id + 1,
                text: e.target.value,
                is_checked: false,
                is_editing: false,
            });

            e.target.value = "";
        },
    },
    computed: {
        undownNum() {
            // // 1. 寻找数组中有多少个未完成
            // const arr = this.todoList.filter(t  => !t.is_checked)
            // // 2. 返回未完成的数量
            // return arr.length

            return this.baseList.filter((t) => !t.is_checked).length;
        },
        base_show() {
            // 当前计算属性中使用了 baseList 和 isShow, 这两个变量有一个发生变化, 都会影响 当前计算属性的值
            return {
                base: this.baseList,
                show: this.isShow,
            };
        },
    },
    watch: {
        base_show: {
            handler() {
                if (this.isShow === "all") {
                    this.todoList = this.baseList;
                }
                if (this.isShow === "active") {
                    this.todoList = this.baseList.filter((t) => !t.is_checked);
                }
                if (this.isShow === "completed") {
                    this.todoList = this.baseList.filter((t) => t.is_checked);
                }

                // this.todoList =
                //     this.isShow === "all"
                //         ? this.baseList
                //         : this.isShow === "active"
                //         ? this.baseList.filter((t) => !t.is_checked)
                //         : this.isShow === "completed"
                //         ? this.baseList.filter((t) => t.is_checked)
                //         : [];
            },
            immediate: true,
            deep: true,
        },

        // base_show() {
        //     // 当前计算属性 侦听了一个计算属性, 只要计算属性的值发生变化, 当前的侦听器一定会执行
        //     // console.log("侦听器执行");
        //     // 当前侦听器应该在页面打开的时候 就执行一遍
        //     if (this.isShow === 'all') {
        //         this.todoList = this.baseList
        //     }
        // },

        // isShow () {
        //     /**
        //      *  如果侦听器只是侦听了 isShow, 那么可能会遇到问题
        //      *      切换到某一个分类的列表时(不是全部任务的列表)
        //      *      此时添加一个新的任务项, 我们的任务列表会出现问题
        //     */
        //     console.log('切换了任务列表')
        // }
    },
    components: {
        showmsg,
    },
};
</script>

<style></style>
